<!-- 点位 》 用能 -->

<template>
  <CommonBody v-bind="bodyProps" @change="toChange">
    <template #treeTop>
      <TreeSearch />
    </template>

    <template #treeBottom>
      <BtnAdd title="新增监测点" mutation="add/openAdd" />
    </template>

    <!-- 展示卡片 -->
    <EasyCard title="监测点详情">
      <FormEdit />
    </EasyCard>

    <!-- 表格卡片 -->
    <EasyCard title="关联设备">
      <DeviceTable />
    </EasyCard>

    <!-- 删除弹窗 -->
    <WebModal word="监测点" delTip="删除当前节点，将一并删除子节点，确定删除？" />

    <!-- 新增弹窗 -->
    <WebModal path="add" word="监测点" medium>
      <FormAdd />
      <template #footer>
        <FooterAdd />
      </template>
    </WebModal>
  </CommonBody>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'
import store from './store'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'PointEnergy',

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [CORE.mixStore(store)],

  /**
   * 组件导入 (Abc.vue + Abc/index.vue)
   */
  ...CORE.components(require.context('./', true, /vue$/)),

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    /**
     * 前缀
     */
    PRE() {
      const { param, DICT } = this
      return `${CORE.dict(DICT.TYPE, param.energyType, 2)}_`
    },

    /**
     * 新增的前缀
     */
    PRE_ADD() {
      const { add_one, DICT } = this
      return `${CORE.dict(DICT.TYPE, add_one.energyType, 2)}_`
    },

    /**
     * 主体属性
     */
    bodyProps() {
      const { PRE } = this

      return {
        hasTree: true,
        tree: this[`${PRE}tree`],
        field: this[`${PRE}TREE_FIELD`],
        filterTip: '监测点名称',
        diy: true,
      }
    },
  },

  /**
   * 监听属性 (深度 deep 首次 immediate)
   */
  watch: {
    /**
     * 监听用电监测点树
     */
    elec_readyTree(ready) {
      ready && this.checkOne()
    },

    /**
     * 监听用水监测点树
     */
    water_readyTree(ready) {
      ready && this.checkOne()
    },

    /**
     * 监听用气监测点树
     */
    gas_readyTree(ready) {
      ready && this.checkOne()
    },

    /**
     * 监听参数类型
     */
    'param.energyType'() {
      const first = this[`${this.PRE}tree`][0] || {}
      this.toChange(first)
    },

    /**
     * 监听子模块的新增就绪
     */
    add_readyAdd(ready) {
      ready && this[`${this.PRE_ADD}startTree`]()
    },

    /**
     * 监听修改就绪
     */
    readyEdit(ready) {
      ready && this[`${this.PRE}startTree`]()
    },

    /**
     * 监听删除就绪
     */
    readyDel(ready) {
      ready && this[`${this.PRE}startTree`]()
      ready && this.closeModal()
    },

    /**
     * 监听绑定就绪
     */
    readyPass(ready) {
      ready && this[`${this.PRE}startTree`]()
    },

    /**
     * 监听解绑就绪
     */
    readyRej(ready) {
      ready && this[`${this.PRE}startTree`]()
    },
  },

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    /**
     * 检查单项
     */
    checkOne() {
      const { PRE, one, toChange } = this
      if (!this[`${PRE}treeMap`][one.id]) {
        const first = this[`${PRE}tree`][0] || {}
        toChange(first)
      }
    },

    /**
     * 切换结构树
     */
    toChange(data) {
      this.param.treeId = data.id
      if (this.one.id === data.id) return

      this.setOne(data)
    },
  },
}
</script>
